<template>
  <div class="dashboard-editor-container">
    <!-- 公告 -->
    <div class="notice-box">
      <notice />
    </div>
    <!-- 总概 -->
    <div class="show-data">
      <overview />
    </div>
    <!-- 采购总概 -->
    <div class="procurement-box">
      <el-row type="flex" justify="space-between" class="row-bg">
        <el-col :span="7" style="margin-right:10px">
          <todoList />
        </el-col>
        <el-col :span="17">
          <div class="chart_view">
            <div style="padding-left:50px;margin-bottom:10px"><btnGroup title="物流趋势图" :btn-list="btnList" :current-btn-active="btnActive" @change="selectChange" /></div>
            <lineChart id="procurement_echart" heights="400px" :legend-data="legendData" :series-data="seriesData" :x-axis-data="xAxisData" />
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import overview from './components/overview'
import btnGroup from '@/components/TopBtnGroup'
import lineChart from '@/components/Echart/line_chart'
import notice from '../common/notice'
import todoList from './components/TodoList'
import { logisticsEchartData } from '@/api/data'
import formDate from '@/utils/formatDate'
export default {
  name: 'DashboardProcurement',
  components: {
    overview, lineChart, btnGroup, notice, todoList
  },
  data() {
    return {
      btnActive: 'month',
      btnList: [
        // { 'text': '当日', 'val': 'day' },
        { 'text': '本月', 'val': 'month' },
        { 'text': '本周', 'val': 'week' },
        { 'text': '季度', 'val': 'quarter' },
        { 'text': '本年', 'val': 'years' },
        { 'text': '全部', 'val': 'all' }
      ],
      xAxisData: [],
      legendData: { data: ['运输数量', '运输单金额', '物流支出金额', '运输总量'], selected: { '运输数量': false, '运输单金额': true, '物流支出金额': false, '运输总量': false }},
      seriesData: [
        {
          name: '运输数量',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '运输单金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '物流支出金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '运输总量',
          type: 'line',
          stack: '总量',
          data: []
        }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.init(2) // 默认本月
    })
  },
  methods: {
    async init(type) {
      const result = await logisticsEchartData({ findType: type })
      if (result.code === 200) {
        const arr = result.data.chart
        this.xAxisData = []
        this.seriesData[0].data = []
        this.seriesData[1].data = []
        this.seriesData[2].data = []
        this.seriesData[3].data = []
        arr.forEach(element => {
          console.log(element)
          if (type === -1) {
            this.xAxisData.push(element.createYear)
          } else if (type === 1) {
            const str = element.createDate
            this.xAxisData.push(formDate.getAssignDateWeek(str))
          } else if (type === 2) {
            const str = element.createDate
            this.xAxisData.push(formDate.getDateTimeDate(str))
          } else if (type === 3 || type === 4) {
            const str = element.createDate
            this.xAxisData.push(formDate.getYearMonth(str))
          }
          this.seriesData[0].data.push(element.logisticsNumber)
          this.seriesData[1].data.push(element.logisticsMoney)
          this.seriesData[2].data.push(element.expensesMoney)
          this.seriesData[3].data.push(element.logisticsTotalWeight)
        })
      }
    },
    selectChange(val) {
      console.log(val)
      switch (val) {
        case 'all': // 全部
          this.init(-1)
          break
        case 'day':
          // this.init(0)
          break
        case 'week': // 本周
          this.init(1)
          break
        case 'month': // 本月
          this.init(2)
          break
        case 'quarter': // 季度
          this.init(3)
          break
        case 'years': // 本年
          this.init(4)
          break
        default:
          break
      }
    }
  }
}
</script>
<style scoped lang='scss'>
  .show-data{
    margin-top: 10px;
    border-radius: 5px;
    background: white;

  }
  .procurement-box{
     margin-top: 10px;
     border-radius: 5px;

  }
  .chart_view,.todoList{
    padding:20px;
    background: white;
    height: 480px;
  }
  .list_title{
    font-weight: bold;
  }
  .list_item li{
    border: 1px solid #eee;
    padding: 10px 15px;
    list-style-type:none;
    margin-bottom: 10px;
    cursor:pointer;
  }
  .right_span{float:right;}
</style>
